<template>
	<view class="container">
		
		<view :class="{ 'tui-item-list': scrollTop >= 0 }">
			<view class="tui-item-item" v-for="(order, Index) in orderList" :key="Index">
				<!-- <tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-list-title">
						<view>订单号：{{ order.orderNum }}</view>
						<view>{{ order.createTime }}</view>
						
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>店铺名称：{{ order.shopName }}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>订单截图：</view>
						<block>
							<image :src="order.orderImg" mode="widthFix" class="order-img"></image>
						</block>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>评价截图：</view>
						<block>
							<image :src="order.evalImg" mode="widthFix" class="order-img"></image>
						</block>
					</view>
				</tui-list-cell> -->
				<tui-card :title="{text:order.shopName,color:'#000'}" :tag="{text:order.orderStatus==1?'待审核':order.orderStatus==2?'已审核':'拒绝',color:order.orderStatus==1?'#b2b2b2':order.orderStatus==2?'#67C23A':'#F56C6C'}">
					<template v-slot:body>
						<tui-list-cell>
							<view class="tui-flex">
								<view class='tui-cell-title'>订单号： {{ order.orderNum }}</view>

							</view>
						</tui-list-cell>
						<tui-list-cell>
							<view class="tui-flex">
								<view class='tui-cell-title'>订单时间： {{ order.createTime }}</view>
							</view>
						</tui-list-cell>
						<!-- 	<tui-list-cell>
							<view class="tui-flex">
								<view class='tui-cell-title'>订单截图</view>
								<image :src="order.orderImg" class="tui-cell-img" mode="widthFix"></image>
							</view>
						</tui-list-cell>
						<tui-list-cell>
							<view class="tui-flex">
								<view class='tui-cell-title'>评价截图</view>
								<image v-for="(evaluate,pIndex) in order.evalImg.split(',')" :key="pIndex" :src="evaluate" class="tui-cell-img" mode="widthFix"></image>
							</view>
						</tui-list-cell> -->


					</template>
					<template v-slot:footer>
						<view class="tui-default">

						</view>
					</template>

				</tui-card>


			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="noMore" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				pageIndex: 1,
				loadding: false,
				scrollTop: 0,
				orderList: [],
				total: 5,
				pageNum: 1,
			};
		},
		computed: {
			...mapState(["isLogin", "userinfo"]),
			noMore() {
				return this.orderList.length >= this.total;
			},
			disabled() {
				return this.loadding || this.noMore;
			},

		},
		onShow() {
			if(this.isLogin){
				this.getList();
			}else{
				uni.showModal({
					title:  '提示',
					content: '查看订单列表需要先登录',
					showCancel: true,
					cancelColor: "#555",
					confirmColor: "#5677fc",
					confirmText: "确定",
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'../login/login/login?from=orderList'
							})
						} else {
							
						}
					}
				})
			}
			
		},
		methods: {
			getList() {
				this.loadding = true;
				this.tui.request(
						"/api/order/list",
						"GET", {
							pageSize: 5,
							pageNum: this.pageNum,

						},
						false,
						false,
						false
					)
					.then((res) => {
						res.rows.map((v) => {
							this.orderList.push(v);
						});
						this.total = res.total;
						console.log(this.orderList)
						this.loadding = false;
						this.pageNum = this.pageNum + 1;
					});
			},


		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
		},
		onReachBottom() {
			//只是测试效果，逻辑以实际数据为准
			if (!this.disabled) {
				this.getList();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	};
</script>

<style>
	.container {
		/* padding-bottom: env(safe-area-inset-bottom); */
		padding-bottom: 100rpx;
	}

	.tui-item-list {}

	.tui-item-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-list-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-list-item {
		width: 100%;
		font-size: 28rpx;
		display: flex;
	}

	.tui-text-gray {
		color: #888;
		font-size: 26rpx;
	}

	.tui-flex-box {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 26rpx;
	}

	.tui-cell-img {
		height: 160rpx;
		width: 160rpx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
